<template>
	<view class="cu-card">
		<form class="cu-item" @submit="editUserAddress">
			<view class="cu-form-group">
				<view class="title">真实姓名</view>
				<input type="text" :value="userAddress.real_name" name="real_name" placeholder="请输入姓名" />
			</view>
			<view class="cu-form-group">
				<view class="title">联系电话</view>
				<input type="text" :value="userAddress.phone" name="phone" placeholder="请输入联系电话" />
			</view>
			<view class="cu-form-group">
				<view class="title">所在地区</view>
				<!-- #ifdef MP -->
				<picker mode="region" :value="region" @change="bindRegionChange">
					<view>{{region[0]}},{{region[1]}},{{region[2]}}</view>
				</picker>
				<!-- #endif -->
			</view>
			<view class="cu-form-group solid-bottom">
				<view class="title">详细地址</view>
				<input type="text" :value="userAddress.detail" name="detail" placeholder="详细地址" />
			</view>
			<view class="cu-bar bg-white">
				<view class="action padding-left" @tap="setAddressDefault"><text class="cuIcon-roundcheckfill" :class="userAddress.is_default ? 'text-red' : ''" style="transform:scale(1.2)"></text>设置为默认地址</view>
			</view>

			<view class="padding">
				<view class="padding flex flex-direction">
					<button class="cu-btn bg-red lg shadow-blur margin-bottom round" form-type="submit">立即保存</button>
					<button class="cu-btn lines-green shadow-blur margin-top lg round" @tap="importAddress">导入微信地址</button>
				</view>
			</view>
			
			<zhi-authorize></zhi-authorize>
		</form>
	</view>
</template>
<script>
	import user from '@/common/user.js'
	import util from '@/common/util.js'
	import zhiAuthorize from '@/components/zhi-authorize/zhi-authorize.vue'
	export default {
		components: {
			zhiAuthorize
		},
		data() {
			return {
				region: ['省', '市', '区/乡'],
				addressId: 0,
				userAddress: {
					is_default: false,
				}
			}
		},
		onLoad(options) {
			if (options.id) {
				this.addressId = options.id
				this.getUserAddressView(options.id)
			}
		},
		methods: {
			/* 地址详情 */
			async getUserAddressView(id) {
				try{
					let res = await this.$api.userAddressView({ id })
					let region = [res.data.province, res.data.city, res.data.district]
					this.userAddress = res.data
					this.region = region
				}catch(e){
					util.Toast({ title: e.msg })
				}
			},
			/* 添加或修改地址 */
			async editUserAddress(e) {
				let value = e.detail.value
				if (!value.real_name) return util.Toast({ title: '请填写真实姓名' })
				if (!value.phone) return util.Toast({ title: '请填写手机号码' })
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(value.phone)) return util.Toast({ title:'请输入正确的手机号码' });
				if (this.region[0] == '省') return util.Toast({ title: '请选择所在地区' })
				if (!value.detail) return util.Toast({ title: '请填写详细地址' })
				let address =  { province: this.region[0], city: this.region[1], district: this.region[2] }
				let data = {
					address: address,
					real_name: value.real_name,
					phone: value.phone,
					detail: value.detail,
					is_default: this.userAddress.is_default ? 1 : 0,
					id: this.addressId ? this.addressId : 0
				}
				try{
					let res = await this.$api.userAddressEdit(data)
					util.Toast({ title: res.msg, icon: 'success' }, { tab:3, url: 1 })
				}catch(e){
					util.Toast({ title: e.msg })
				}
			},
			/* 导入微信地址 */
			importAddress() {
				let that = this
				user.importWechatAddress().then(res => {
					that.$api.userAddressEdit(res).then(res => {
						util.Toast({ title: '导入成功', icon: 'success' }, { tab:3, url: 1 })
					}).catch(err => {
						util.Toast({ title: err.msg })
					})
				})
			},
			/* 设为默认 */
			setAddressDefault() {
				this.userAddress.is_default = !this.userAddress.is_default
			},
			/* 选择地址 */
			bindRegionChange(e) {
				this.region = e.detail.value
			},
		}
	}
</script>
<style lang="scss">
</style>
